<template>
	<view class='container'>
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="应用"></uni-nav-bar>
		</view>
		<view class="application position-r-top">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image class="swiper-img" :src="item.url" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<uni-grid :column="4" :show-border="false" @change='goSubpage'>
				<uni-grid-item class="text-a-c" v-for="(item,index) in menuList" :key='index' :index="index">
					<image :src="item.imgUrl" mode=""></image>
					<text class="text color-6">{{ item.title }}</text>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import { menu, getBanner, getFileInfo } from '@/common/api/api'
	export default {
		data() {
			return {
				info: [{
					url: require('@/common/images/img1.png')
				}],
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, 0.3)',
					selectedBackgroundColor: '#fff',
					border: 'rgba(255, 255, 255, 0.3)',
					selectedBorder: '#fff'
				},
				gridList: [
					{
						imgUrl: require('@/common/images/sgsb.png'),
						title: '施工上报',
						requestUrl: '/pages/Application/ConstructionReport/ConstructionReport'
					}, {
						imgUrl: require('@/common/images/sgsh.png'),
						title: '施工审核',
						requestUrl: '/pages/Application/ConstructionAudit/ConstructionAudit'
					}, {
						imgUrl: require('@/common/images/dkkq.png'),
						title: '打卡考勤',
						requestUrl: '/pages/Application/CheckWork/CheckWork'
					}, {
						imgUrl: require('@/common/images/kqgl.png'),
						title: '考勤管理',
						requestUrl: '/pages/Application/CheckWorkManage/CheckWorkManage'
					}, {
						imgUrl: require('@/common/images/whrw.png'),
						title: '维护上报',
						requestUrl: '/pages/Application/MaintainReport/MaintainReport'
					}, {
						imgUrl: require('@/common/images/whsh.png'),
						title: '维护审核',
						requestUrl: '/pages/Application/MaintainAudit/MaintainAudit'
					}, {
						imgUrl: require('@/common/images/xcxj.png'),
						title: '巡查巡检',
						requestUrl: '/pages/Application/Inspection/Inspection'
					}, {
						imgUrl: require('@/common/images/gzjh.png'),
						title: '工作计划',
						requestUrl: '/pages/Application/WorkPlan/WorkPlan'
					}, {
						imgUrl: require('@/common/images/aqzx.png'),
						title: '安全咨询',
						requestUrl: '/pages/Application/SafeConsult/SafeConsult'
					}, {
						imgUrl: require('@/common/images/txl.png'),
						title: '通讯录',
						requestUrl: '/pages/Application/AddressBook/AddressBook'
					},
				],
				menuList: []
			}
		},
		onShow() {
			this.menuList = [];
			menu({device: 1}).then((res)=> {
				if(res.code == 20000){
					uni.setStorageSync('menu', res.data);
					let data = {};
					res.data.forEach((item)=>{
						if(item.name=='应用' || item.label=='应用') data = item;
					});
					data.children&&data.children.forEach((item)=> {
						this.menuList.push({
							imgUrl: require(`@/common/images/${item.icon}`),
							title: item.name,
							requestUrl: item.path
						})
					})
				}
			})
		},
		onLoad() {
			getBanner().then((res)=> {
				if(res.data.length){
					this.info = [];
					res.data.forEach((item)=> {
						item.fileId && getFileInfo(item.fileId).then(res => {
							let url = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res)
							this.info.push({url})
						})
					})
				}
			})
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			goSubpage(e){
				uni.navigateTo({
					url: this.menuList[e.detail.index].requestUrl
				})
			},
		}
	}
</script>

<style lang="less">
	.swiper-box {
		height: 360rpx;
		width: 94%;
		padding: 20rpx 3%;
	}

	.swiper-box /deep/ .uni-swiper-wrapper {
		border-radius: 14rpx;
	}

	.swiper-img {
		width: 100%
	}

	.application /deep/ .uni-grid {
		background-color: #fff;
		width: 94%;
		margin: 0 3%;
		border-radius: 14rpx;
		padding-bottom: 20rpx;
	}

	.application /deep/ .uni-grid .uni-grid-item {
		margin-top: 20rpx;

		>uni-view {
			display: flex;
			align-items: center;

			uni-image {
				width: 114rpx;
				height: 114rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>
